/**
 * create by young (young2f@outlook.com) on 2020/9/16
 * 选择辅料
 */


'use strict';
import React from 'react';
import {Button, DatePicker, Form, Icon, Input, InputNumber, notification} from 'antd';

import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';

import {FormField, FormLayout, ModalFooter} from "antd-extra";
import ViewTitle from "../../../components/ViewTitle";
import notify from "../../../components/NotificationExtra";
import UploadPic from "../../../components/UploadPic";


moment.locale('zh-cn');
const table = 'ProcureOrder';
@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            material,
            store
          }) => ({...user, ...material, ...dynamicLabel, ...global, ...store}))
export default class ModalCreateOutboundLot extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {

  }

  renderFoot = () => {
    const {foot, value, modalRef, form, callback, record} = this.props;

    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            const {modalRef} = this.props;
            form.validateFields((err, values) => {
              if (err) {
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }
              const {fileList} = this.state;
              const {record} = this.props;
              const {count, outboundCount} = values;
              const _count = parseInt(outboundCount) + parseInt(record.outboundCount);

              if (_count > count) {
                const msg = record.outboundCount > 0 ? `已出库${record.outboundCount},加上` : "";
                notify({type: 'error', message: msg + `当前出货数量：${outboundCount} 已超出下单数量！`});
                return;
              }

              values.fileList = fileList;
              values.price = record.price;
              values.materials = record.materials;
              values.division = record.division;
              values.lotType = '订单出库';
              values.salesOrderCode = record.salesOrderCode;
              values.spLotId = record.spLotId;
              callback(values);
              modalRef.close();
            });
          }}>确定</Button>

          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };

  getMaterialInfo() {
    const {form, cols = 2, record = {}} = this.props;
    const {prodName, prodCode, shippingMan, deliverWay, pkg, count, memo} = record;
    return <FormLayout form={form} cols={cols}>
      <FormField
        label={'品名'}
        name={'prodName'}
        initialValue={prodName}
      >
        <Input disabled style={{width: '100%'}}></Input>
      </FormField>

      <FormField
        label={'编码'}
        name={'prodCode'}
        initialValue={prodCode}
      >
        <Input disabled style={{width: '100%'}}></Input>
      </FormField>
      <FormField
        label={'数量'}
        name={'count'}
        initialValue={count}
      >
        <Input disabled style={{width: '100%'}}></Input>
      </FormField>


      <FormField
        label={'发货方式'}
        name={'deliverWay'}
        initialValue={deliverWay}
      >
        <Input disabled style={{width: '100%'}}></Input>
      </FormField>
      <FormField
        label={'包装'}
        name={'pkg'}
        initialValue={pkg}
      >
        <Input disabled style={{width: '100%'}}></Input>
      </FormField>
      <FormField
        label={'备注'}
        name={'memo'}
        initialValue={memo}
      >
        <Input disabled style={{width: '100%'}}></Input>
      </FormField>
      <FormField
        label={'出货数量'}
        name={'outboundCount'}
        required={true}
      >
        <InputNumber style={{width: '100%'}}></InputNumber>
      </FormField>
      <FormField
        label={'承运人'}
        name={'shippingMan'}
        initialValue={shippingMan}
        required={true}
      >
        <Input style={{width: '100%'}}></Input>
      </FormField>
      <FormField
        label={'运费'}
        name={'shippingFee'}
        required={true}
      >
        <InputNumber style={{width: '100%'}}></InputNumber>
      </FormField>
      <FormField
        label={'出货时间'}
        name={'outboundDate'}
        required={true}
        initialValue={moment()}
      >
        <DatePicker style={{width: '100%'}}></DatePicker>
      </FormField>
    </FormLayout>;
  }

  // handleCancel = () => this.setState({previewVisible: false});
  //
  // handlePreview = async file => {
  //
  //   if (!file.url && !file.preview) {
  //     file.preview = await this.getBase64(file.originFileObj);
  //   }
  //
  //   this.setState({
  //     previewImage: file.url || file.preview,
  //     previewVisible: true
  //   });
  // };
  // handleChange = ({fileList}) => {
  //
  //   _.map(fileList, async file => {
  //     if (!file.url && !file.preview) {
  //       file.preview = await this.getBase64(file.originFileObj);
  //     }
  //   });
  //   this.setState({fileList});
  // };

  render() {
    const {style} = this.props;

    const {previewVisible, previewImage, fileList} = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus"/>
        <div className="ant-upload-text">上传图片</div>
      </div>
    );
    return (
      <div style={{...style}}>
        {this.getMaterialInfo()}
        <ViewTitle
          title={'上传送货单'}
        ></ViewTitle>
        <UploadPic title={'上传送货单'} fileList={fileList} callback={f => this.state.fileList = f.fileList}></UploadPic>
        {/*{*/}
        {/*  <div style={{marginLeft: '64px'}}>*/}
        {/*    <Upload*/}
        {/*      action={'http://127.0.0.1:28900/api/global/upload?type=outboundLot'} // 替换为你的上传API地址*/}
        {/*      listType="picture-card"*/}
        {/*      fileList={fileList}*/}
        {/*      onPreview={this.handlePreview}*/}
        {/*      onChange={this.handleChange}*/}
        {/*      beforeUpload={(file, fileList) => {*/}
        {/*        const isLt2M = file.size / 1024 / 1024 < 2;*/}
        {/*        if (!isLt2M) {*/}
        {/*          notify({type: 'error', message: '文件过大！'});*/}
        {/*          return isLt2M;*/}
        {/*        }*/}

        {/*        return false;*/}
        {/*      }}*/}
        {/*    >*/}
        {/*      {uploadButton}*/}
        {/*    </Upload>*/}
        {/*    <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>*/}
        {/*      <img alt="example" style={{width: '100%'}} src={previewImage}/>*/}
        {/*    </Modal>*/}
        {/*  </div>*/}
        {/*}*/}
        {this.renderFoot()}
      </div>

    );
  }
}

